<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    *{
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    .box{
      width: 400px;
      height: 400px;
      background-image: url("../plats1.png");
      background-color: #aaaaaa;
      background-repeat: no-repeat;
      /*background-position: top left;*/
      background-position: calc(100% - 20px) calc(100% - 10px);
      background-origin: padding-box;/*此时我们就会根据该盒子的padding来进行改变了*/
      /*我们的padding在哪，那么精灵图的起始位置也就在哪*/
      /*
       background-origin 属性是 相对于内容框来说，定位背景图像
       常用值有 padding-box 背景图像相对于内边距来定位
       border-box 背景图像相对于边框来定位
       content-box 背景图像相对于内容来定位

       同时，我们也可以使用计算属性 calc() 来计算 是代码更加 DRY
      */
      padding: 30px;
      border: 10px solid red;
    }
  </style>
</head>
<body>
  <div class="box">

  </div>
</body>
</html>
